<script setup>
import {healthStore} from '@pi/health';
import {userStore} from '@pi/user';
import {onMounted, reactive, ref} from "vue";
import HealthScore from "@/component/HealthScore.vue";

let health = healthStore();
let user = userStore();
let options = reactive({pageNo: 1, pageSize: 10});
let dialog = reactive({
    show: false,
    loading: false,
    form: {},
    rules: {
        label: {required: true, message: '请输入记录名', trigger: 'blur'},
        time: {required: true, message: '请选择检查时间', trigger: 'change'}
    },
    type: 0,
    open(type = 0, e = {}) {
        dialog.type = type;
        dialog.form = {...e};
        dialog.show = true;
    },
    close() {
        dialog.show = false;
        dialog.loading = false;
        formRef.value.resetFields();
    }
});
let formRef = ref();
let drawer = reactive({
    show: false,
    id: 0,
    open(id) {
        drawer.id = id;
        drawer.show = true;
    }
});

// 添加 or 修改
function submit() {
    formRef.value.validate(async e => {
        if (e) {
            dialog.loading = true;
            await health[dialog.type ? 'update' : 'create'](dialog.form);
            dialog.close();
            health.get(options);
        }
    });
}

// 删除
async function remove(id) {
    await health.remove(id);
    health.get(options);
}

onMounted(() => {
    health.get(options);
})
</script>

<template>
    <h5 class="title">卫生检查记录</h5>
    <div class="btn">
        <el-button type="primary" icon="Plus" size="small" plain @click="dialog.open()" v-if="user.info.role === 1">添加</el-button>
    </div>
    <el-table :data="health.list" style="height: calc(100% - 100px)" size="small" border stripe show-overflow-tooltip>
        <el-table-column prop="id" label="编号" align="center" />
        <el-table-column prop="label" label="记录名" align="center" />
        <el-table-column prop="time" label="检查时间" align="center" />
        <el-table-column label="操作" align="center">
            <template #default="{row}">
                <el-button type="primary" link icon="Edit" @click="drawer.open(row.id)">查看报表</el-button>
                <template v-if="user.info.role < 2">
                    <el-button type="warning" link icon="Edit" @click="dialog.open(1, row)">修改</el-button>
                    <el-button type="danger" link icon="Delete" @click="remove(row.id)">删除</el-button>
                </template>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="health.total" small @current-change="health.get(options)" v-model:current-page="options.pageNo" :page-size="options.pageSize" />
    </div>

    <el-dialog :title="dialog.type ? '修改卫生检查记录' : '添加卫生检查记录'" v-model="dialog.show" width="600px" @close="dialog.close" draggable>
        <el-form ref="formRef" :model="dialog.form" :rules="dialog.rules" v-loading="dialog.loading" label-width="80px">
            <el-form-item label="记录名" prop="label">
                <el-input v-model="dialog.form.label" placeholder="请输入记录名" :maxlength="32" clearable />
            </el-form-item>
            <el-form-item label="检查时间" prop="time">
                <el-date-picker v-model="dialog.form.time" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="submit">保存</el-button>
            <el-button @click="dialog.close">取消</el-button>
        </template>
    </el-dialog>

    <el-drawer v-model="drawer.show" direction="rtl" :with-header="false" size="80%">
        <HealthScore :show="drawer.show" :id="drawer.id" />
    </el-drawer>
</template>

<style scoped lang="less">

</style>